<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="/static/common/common-js.js" type="application/javascript"></script>
</head>
<body>
<div id="app">
    This is the index page of activiti!
    <br/>
    {{message}}
    <br/>
    <div id="example-1">
        <p>The button above has been clicked {{ counter }} times.</p>
        <el-button type="primary" @click="loadData()">add</el-button>
    </div>
</div>


<div id="app2">
    <template>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
        </el-table>
    </template>
</div>

<script>
    var example1 = new Vue({
        el: '#example-1',
        data: {
            counter: 0
        }
    })

    new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })

    /*	var Main = {
            data() {
                return {
                    tableData: [{
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }, {
                        date: '2016-05-04',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1517 弄'
                    }, {
                        date: '2016-05-01',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1519 弄'
                    }, {
                        date: '2016-05-03',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1516 弄'
                    }]
                }
            }
        }
        var Ctor = Vue.extend(Main)
        new Ctor().$mount('#app2')*/

    // import axios from 'axios';
    // import qs from 'qs';
    // export default {
	var example2 = new Vue({
		el: '#app2',
		data: {
			tableData: [ {
				date: '2016-05-03',
				name: '王小虎',
				address: '上海市普陀区金沙江路 1516 弄'
			}]
        },
        // mounted: function () {
        //     this.loadData();
        // },

        methods: {
            loadData: function () {
                // let param = {filter: this.filters.name};
                // axios.post('/user/userlist', qs.stringify(param)).then((result) = > {
                // axios.post('/datalist', '').then((result) => {
				//     var _data = result.data;
				// 	this.tableData = _data;
				// });

				$.ajax({
					type: "get",
					url: "/datalist",
					async: true,
					success: function(result) {
						var _data = result.data;
						this.tableData = _data;
					},
				});
            }
        }
    });
    // var Ctor = Vue.extend(Main)
    // new Ctor().$mount('#app2')

</script>
</body>
</html>